<template>
  <div>
    <!--    v-if="$hasPermission('sys:export:export')"-->
    <el-card v-if="$hasPermission('sys:export:export')">
      <div slot="header" class="clearfix">
        <span>{{ $t('export.export') }}</span>
      </div>
      <el-form ref="form" :model="form">
        <el-form-item label="">
          <el-row>
            <el-radio v-model="radio" label="0">{{ $t('export.exportAll') }}</el-radio>
          </el-row>
          <el-row>
            <el-radio disabled v-model="radio" label="1">{{ $t('export.exportSelect') }}</el-radio>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="small">{{ $t('export.export') }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--    v-if="$hasPermission('sys:export:import')"-->
    <el-card v-if="$hasPermission('sys:export:import')">
      <div slot="header" class="clearfix">
        <span>{{ $t('export.import') }}</span>
      </div>
      <el-row>
        <!--                      accept="application/json"
        -->
        <el-col :span="12">
          <el-upload
              class="upload-demo"
              ref="upload"
              :action="action"
              :limit="1"
              :multiple="false"
              :headers="headers"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
              :auto-upload="false"
              :before-upload="beforeUpload">
            <el-button slot="trigger" size="small">{{ $t('export.selectFile') }}</el-button>
            <el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">{{ $t('export.upload') }}</el-button>
            <div slot="tip" class="el-upload__tip">{{ $t('export.uploadTip') }} <br> {{ $t('export.uploadTipTwo') }}</div>
          </el-upload>
        </el-col>
      </el-row>
    </el-card>
    <!--    v-if="$hasPermission('sys:export:import')"-->
    <el-card v-if="$hasPermission('sys:export:import')">
      <div slot="header" class="clearfix">
        <span>{{ $t('export.Rollback') }}</span>
      </div>
      <div v-if="rollBackList.length === 0">
        No rollback record
      </div>
      <div v-else>
        <el-row style="margin-bottom: 10px">
          <el-button type="primary" @click="rollBack" size="small">{{ $t('export.Rollback') }}</el-button>
        </el-row>
        <el-radio-group v-model="rollBackName">
          <el-row style="margin-bottom: 10px" v-for="(item,index) in rollBackList" :key="index">
            <el-radio :label="item">{{ item }}</el-radio>
          </el-row>
        </el-radio-group>
      </div>
    </el-card>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import http from '@/utils/request'
import store from '@/store'
import JsFileDownload from 'js-file-download'
export default {
  name: 'exportAndImport',
  data () {
    return {
      radio: '0',
      action: null,
      fileList: [],
      headers: {
        'Accept-Language': Cookies.get('language') || 'zh-CN',
        token: Cookies.get('token'),
        tenantCode: Cookies.get('tenant_code') || '',
        loginAsRoleId: sessionStorage.getItem('loginAsRoleId') ? sessionStorage.getItem('loginAsRoleId') : '',
        loginAsUserId: sessionStorage.getItem('loginAsUserId') ? sessionStorage.getItem('loginAsUserId') : '',
        timezoneOffset: store.state.user.timezoneOffset ? store.state.user.timezoneOffset : '',
        timezoneId: store.state.user.timezoneId ? store.state.user.timezoneId : ''
      },
      rollBackList: [],
      rollBackName: null,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$interface.system.exportData().then(res => {
        loading.close()
        let filename = res.headers['content-disposition']
        if (filename) {
          filename = res.headers['content-disposition'].split('filename=')[1]
        }
        JsFileDownload(res.data, filename)
      }).catch(() => {
        loading.close()
      })
    },
    rollBack () {
      if (!this.rollBackName) {
        return this.$message.error('Please Select rollBack')
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$interface.system.rollback({
        objectName: this.rollBackName
      }).then(res => {
        loading.close()
        if (res.data.code === 0) {
          this.$message.success('success')
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(() => {
        loading.close()
      })
    },
    submitUpload () {
      if (this.$refs.upload.uploadFiles && this.$refs.upload.uploadFiles.length > 0) {
        this.$refs.upload.submit()
      } else {
        return this.$message.error('Please Select File')
      }
    },
    beforeUpload (file) {
      this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return true
    },
    handleExceed (files, fileList) {
      this.$message.warning(this.$t('export.uploadExceedMsg'))
    },
    handleSuccess (response, file, fileList) {
      this.$loading({}).close()
      if (response.code !== 0) {
        this.$message.error(response.msg)
      }
    },
    handleError () {
      this.$loading({}).close()
    },
    getRollBack () {
      this.$interface.system.rollBackList().then(res => {
        if (res.data.data) {
          this.rollBackList = res.data.data.reverse()
        }
      })
    }
  },
  created () {
    this.action = http.options.baseURL + '/web/um/data/setting/import'
    this.getRollBack()
  }
}
</script>

<style scoped>
.export{
  height: 100%;
}
</style>
